<template>
    <div class="CategoryList">
        <div>
            <van-nav-bar
                title="类别列表"
                left-text="返回"
                left-arrow
                fixed
                @click-left="onClickLeft"
                />
        </div>
        
        <div class="Datalist">
                    <van-row>
                        <van-col span="6">
                            <div id="leftNav">
                                <ul>
                                    <li 
                                    :class="{categoryActive:categoryActiveIndex == item.ID}" 
                                    @click="clickcategoryActive(index,item.ID)" 
                                    v-for="(item ,index) in category" 
                                    :key='item.ID'>{{item.MALL_CATEGORY_NAME}}</li>
                                </ul>
                            </div>
                        </van-col>
                        <van-col span="18">
                            <div class="tabCategorySub">
                                <van-tabs v-model="active" @click="onClickCategorySub">
                                    <van-tab  v-for="(item,index) in categorySub" :key="index" :title="item.MALL_SUB_NAME">
                                       
                                    </van-tab>
                                </van-tabs>
                            </div>
                          <div id="list-div">
                              <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                                    <van-list
                                    v-model="loading"
                                    :finished="finished"
                                    @load="onLoad"
                                    >
                                        <div class="list-item" @click="goGoodsInfo(item.ID)" v-for="item in goodList" :key="item.ID">
                                            <div class="list-item-img">
                                                <img :src="item.IMAGE1" width="100%" :onerror="errorImg"/>
                                                </div>
                                            <div class="list-item-text">
                                                <div>{{item.NAME}}</div>
                                                <div class="">￥{{item.ORI_PRICE | filterMoney}}</div>
                                            </div>

                                        </div>
                                    </van-list>
                              </van-pull-refresh>
                            </div>  
                        </van-col>
                    </van-row>
         </div>
    </div>
</template>

<script>
import url from "@/serviceAPI.config.js";
import {toMoney} from  '@/filter/moneyFilter.js';
export default {
  name: "CategoryList",
  data() {
    return {
        category:[],
        categorySub:[],
        categoryActiveIndex:0,
        active:0,
        loading: false,
        finished: false,
        isLoading: false,
        page:1,
        list:[],          //商品列表的页数
        goodList:[],     //商品信息
        categorySubId:'', //商品子分类ID
        errorImg:'this.src="' + require('@/assets/images/err.png') + '"' ,
    };
  },
  filters:{
      filterMoney(num){
               return toMoney(num)
      }
  },
  methods: {
      onRefresh() {
        setTimeout(() => {
            this.$toast('刷新成功');
            this.isLoading = false;
            this.count++;
        }, 500);
        },
    onLoad() {
      setTimeout(() => {
        this.categorySubId = this.categorySubId ? this.categorySubId:this.categorySub[0].ID;
        this.getGoodList()
      }, 1000);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    //点击子类获取商品信息
    onClickCategorySub(index,title){
        this.categorySubId= this.categorySub[index].ID
        
        this.goodList=[]
        this.finished = false
        this.page=1
        this.onLoad()
    
    },
    clickcategoryActive(index,categoryId){
        this.categoryIndex=index
        this.page=1
            this.finished = false
            this.goodList=[]
        this.categoryActiveIndex = index;
        this.getCategorySubByCategoryId(categoryId);
    },
    getGoodList() {
        this.axios({
            url:url.getGoodsListByCategorySubID,
            method:"post",
            data:{
                categorySubId:this.categorySubId,
                page:this.page
            }
        }).then( (response) => {
                 if(response.data.code == 200  && response.data.message.length){
                        this.page++
                        this.goodList=this.goodList.concat(response.data.message)
                    }else{
                        this.finished = true
                    }
                    this.loading = false;
        }).catch((error)=>{

        })
    },
    getCategory() {
      this.axios({
        url: url.getCategoryList,
        method: "get"
      })
        .then(res => {
          if(res.data.code == 200 && res.data.msg){
              this.category = res.data.msg;
               this.getCategorySubByCategoryId(this.category[0].ID);
          }
        })
        .catch(err => {
          Toast("服务器错误，数据取得失败");
        });
    },
    getCategorySubByCategoryId(id){
       this.axios.post(url.getCategorySubList, {
            categoryId: id,
        })
        .then( (response)=> {
            if(response.data.code == 200){
               this.categorySub = response.data.msg;
               this.active = 0;
               this.categorySubId = this.categorySub[0].ID
               this.onLoad()
            }
        })
        .catch( (error) =>{
            Toast('服务器错误，数据取得失败')
        });
    },
    goGoodsInfo(id){
        this.$router.push({name:'Goods',params:{goodsId:id}});
    }
  },
  created() {
    this.getCategory();
  },
  mounted(){
      let wH = document.documentElement.clientHeight || document.body.clientHeight;
      document.getElementById('leftNav').style.height = (wH - 46)+'px';
      document.getElementById('list-div').style.height = (wH - 90-50)+'px';
  }
};
</script>

<style scoped>
.Datalist {
  margin-top: 46px;
}

#leftNav ul li {
  line-height: 2rem;
  border-bottom: 1px solid #e4e7ed;
  padding: 3px;
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
}
.categoryActive {
  background-color: #fff !important;
}
.list-item{
        display: flex;
        flex-direction: row;
        font-size:0.8rem;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        padding:5px;
    }
#list-div{
        overflow: scroll;
}
.list-item-img{
        flex:8;
    }
.list-item-text{
        flex:16;
        margin-top:10px;
        margin-left:10px;
}
</style>